<template>
	<div class="enclosure">
		<div class="edit-btn" v-if="editState == 0" @click="editState = 1"><img src="@/assets/me/edit.png"><span>修改</span></div>
		<div class="title">附件简历</div>
		<div class="enclosure-content" v-if="editState == 0 && form.attachmentId.length>0">
			<div class="enclosure-item flex">
				<div class="enclosure-icon"><img src="@/assets/me/word.png"></div>
				<div class="enclosure-name flex-item">{{form.attachmentName}}</div>
				<div class="enclosure-time">上传于：2020-09-15 13:26</div>
				<div class="enclosure-option flex">
					<span class="change" @click="editState = 1">更换</span>
					<span class="download" @click="downloadFile()">下载</span>
					<span class="del" @click="delEnclosure">删除</span>
				</div>
			</div>
		</div>
		<div class="enclosure-content no-data" v-if="editState == 0 && form.attachmentId.length==0">
			请上传.DOC格式的附件(文件大小2M以内)
		</div>
		<div class="enclosure-edit" v-if="editState == 1">
			<div class="content">
				<el-form ref="form" :model="form" :rules="rules" label-width="85px" label-position="left" class="flex" hide-required-asterisk="false">
					<div class="edit-left">
						<div class="edit-item flex upload-item">
							<div class="red-dian"></div>
							<el-form-item label="上传文件：" class="flex-item" prop="attachmentId">
								<el-upload
									action="#"
									class="upload-input"
									v-model="files"
									:show-file-list="false"
									:http-request="uploadFaceFiles">
										<div class="upload-btn"><img src="@/assets/me/upload.png">上传文件</div>
								</el-upload>
							</el-form-item>
						</div>
					</div>
				</el-form>
				<div class="form-option">
					<div class="save qida-success-btn" @click="saveEdit">保存</div>
					<div class="cancel qida-cancel-btn" @click="cancelEdit()">取消</div>
					<span class="tips">请上传.DOC格式的附件(文件大小2M以内)</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {uploadResumeAttachment} from '@/api/me/resume'
import {filesAnon} from '@/api/base'
	export default {
		name:'enclosure',
		props:['resumeAttachments'],
		data: function() {
			return {
				editState:0,//0:显示，1：编辑
				editIndex:0,
				resumeEnclosure:{},
				form:{
					"attachmentId": '',
					"attachmentName":'',
					"attachmentUrl":'',
					"resumeId": this.$route.query.id
				},
				files:[],
				rules: {
					fileId: [{ required: true, trigger: "blur", message: "请选择文件" }],
				}
			}
		},
		watch:{
			resumeAttachments(val){
				if(val.length>0 && val != null){
					this.form = val[0];
					this.resumeEnclosure=JSON.parse(JSON.stringify(val[0]));
				}
				this.form.resumeId=this.$route.query.id;
			}
		},
		created() {


		},
		methods: {
			saveEdit(){
				this.$refs.form.validate(valid => {
					if (valid) {
						this.form=JSON.parse(JSON.stringify(this.resumeEnclosure));
						uploadResumeAttachment(this.form).then(res => {
							this.$message.success('保存成功');
							this.editState=0;
						}).catch(err => {
							this.$message.error(err);
						})
					}
				})
			},
			delEnclosure(){
				this.resumeEnclosure={
					"attachmentId": '',
					"attachmentName":'',
					"attachmentUrl":'',
					"resumeId": this.$route.query.id
				}
				this.form={
					"attachmentId": '',
					"attachmentName":'',
					"attachmentUrl":'',
					"resumeId": this.$route.query.id
				}
				uploadResumeAttachment(this.form).then(res => {
					this.$message.success('删除成功');
				}).catch(err => {
					this.$message.error(err);
				})
			},
			uploadFaceFiles(params){
				var vm = this;
				const file = params.file,
					fileType = file.type,
					fileName = file.name,
					isImage = fileType.indexOf("doc") != -1,
					isLt2M = file.size / 1024 / 1024 < 2;
				if (!isImage) {
				  this.$message.error("只能上传文件格式doc");
				  return;
				}
				if (!isLt2M) {
				  this.$message.error("只能上传文件大小小于2M");
				  return;
				}
				// 根据后台需求数据格式
				const form = new FormData();
				// 文件对象
				form.append("file", file);
				// 项目封装的请求方法，下面做简单介绍
				filesAnon(form).then(res => {
					this.$message.success('上传成功');
					this.$set(vm.resumeEnclosure,'attachmentUrl',res.url)
					this.$set(vm.resumeEnclosure,'attachmentId',res.id)
					this.$set(vm.resumeEnclosure,'attachmentName',res.name)
				}).catch(res => {
					//this.$message.error("上传失败，请重新上传");
				})
			},
			cancelEdit(){
				this.resumeEnclosure=JSON.parse(JSON.stringify(this.form));
				this.editState=0;
			},
			downloadFile(){
				location.href=this.form.attachmentUrl;
			}
		}
	}
</script>
<style lang="scss">
	.enclosure{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.edit-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.enclosure-content.no-data{
			padding-left: 10px;
			margin-top: 40px;
		}
		.enclosure-content{
			margin-top: 25px;
			color: #787878;
			.enclosure-item{
				height: 63px;
				background: #FFFFFF;
				border: 1px solid #E8E8E8;
				border-radius: 4px;
				padding: 0 25px;
				align-items: center;
				.enclosure-icon{
					img{display: block;}
				}
				.enclosure-name{
					padding-left: 25px;
					padding-right: 25px;
				}
				.enclosure-time{
					width: 350px;
				}
				.enclosure-option{
					span{
						display: block;
						cursor: pointer;
						color: #3EABC4;
						margin-left: 10px;
					}
				}
			}
		}
		.enclosure-edit{
			.content{
				margin-top: 25px;
				padding-bottom: 20px;
				.edit-left{
					padding-right: 80px;
					width: 675px;
					box-sizing: border-box;
				}
				.edit-item{
					
					.el-form-item{
						margin-bottom: 20px;
						.el-form-item__label{
							font-weight: normal;
							color: #777777;
						}
						.el-input__inner{
							border-radius: 0px;
						}
						.el-input{
							width: 100%;
						}
						.upload-input{
							width: 100%;
							.el-upload{
								width: 100%;
							}
						}
						.upload-btn{
							width: 100%;
							height: 60px;
							line-height: 60px;
							background: #EEF5F7;
							border-radius: 4px;
							text-align: center;
							color: #3EABC4;
							img{
								vertical-align: middle;
								margin-top: -3px;
								margin-right: 5px;
							}
						}
					}
					.red-dian{
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #d92032;
						margin-right: 5px;
						margin-top: 16px;
					}
					.red-dian.hide{
						opacity: 0;
					}
				}
				.edit-item.upload-item{
					.el-form-item__label{
						font-weight: normal;
						color: #777777;
						height: 60px;
						line-height: 60px;
					}
					.red-dian{
						margin-top: 28px;
					}
				}
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}
					.tips{
						font-weight: 400;
						color: #BBBBBB;
						line-height: 36px;
						margin-left: 20px;
					}
					
				}
			}
		}
	}
</style>
